<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>管理员列表</span>
                <hd-user-select style="float: right; padding: 3px 0" @update="setAdmin">
                    添加管理员
                </hd-user-select>
            </div>
            <el-table
                :data=users
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    label="ID"
                    prop="id"
                    width="80">
                </el-table-column>

                <el-table-column
                    label="名称"
                    prop="name"
                >
                </el-table-column>

                <el-table-column
                    label="联盟会员"
                    prop="member"
                >

                </el-table-column>

                <el-table-column
                    label="手机号"
                    prop="mobile"
                >
                </el-table-column>

                <el-table-column
                    #default="{row:user}"
                    label="是否管理员"
                >
                    <span v-if="user.is_admin">是</span>
                    <span v-else>否</span>
                </el-table-column>

                <el-table-column
                    #default="{row:user}"
                    label="操作"
                    width="200">
                    <el-button-group>
                        <el-button size="mini" type="danger" @click="cancelAdmin(user)">取消管理员</el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    data() {
        return {
            tabs,
            users: []
        }
    },
    created() {
        this.load()
    },
    methods: {
        async cancelAdmin(user) {
            this.$confirm('此操作将回收管理员角色及权限?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.axios.post(`admin/user/${user.id}/cancelAdmin`, user)
                await this.load()
            })

        },
        async load() {
            this.users = await this.axios.get('admin/user/isAdmin');
        },
        async setAdmin(user) {
            await this.axios.post(`admin/user/${user.id}/setAdmin`, user)
            await this.load()
        },
    },
    route: {name: 'admin.manager.index', meta: {title: '系统管理员'}}
}
</script>

<style scoped>

</style>
